<template>
    <el-row>
        <el-col :span="24"><div style="width: 100%;height:1800px;background: #F5F7F9;overflow: hidden" class="grid-content bg-purple-dark">

            <!--备件信息-->
            <div style="width: 65%;height: 340px;background: white;margin-left: 250px;margin-top: 20px;border-radius: 4px">
                <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 40px">
                    &nbsp;&nbsp;&nbsp;备件信息
                </div>
                <el-form ref="form" :model="form" label-width="100px">
                    <div style="margin-top: 30px;margin-left: 30px">
                        <el-form-item label="条件编码">
                            <el-input v-model="form.spCode" disabled style="width: 300px" size="large" placeholder="系统自动生成"></el-input>
                        </el-form-item>
                        <el-form-item label="备件名称">
                            <el-input v-model="form.spName" style="width: 300px" size="large" placeholder="请输入" @change="nameSelf"></el-input>
                        </el-form-item>
                        <el-form-item label="规格型号">
                            <el-input v-model="form.spSpecification" style="width: 300px" size="large" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                    <div style="margin-top: -40px;margin-left: 550px;position: relative;top: -134px">
                    <el-form-item label="备件类型">
                        <el-cascader
                                style="width: 300px"
                                size="large"
                                v-model="form.spTypeId"
                                :options="options"
                                :props="props"
                                expand-trigger="hover"
                                change-on-select
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="单位">
                        <el-select v-model="form.saUnit" size="large" style="width: 300px">
                            <el-option label="个" value=1></el-option>
                            <el-option label="台" value=2></el-option>
                            <el-option label="条" value=3></el-option>
                            <el-option label="箱" value=4></el-option>
                            <el-option label="块" value=5></el-option>
                            <el-option label="套" value=6></el-option>
                            <el-option label="次" value=7></el-option>
                            <el-option label="辆" value=8></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生产厂商">
                        <el-input v-model="form.factureName" style="width: 300px" size="large" placeholder="请输入"></el-input>
                    </el-form-item>
                    </div>
                    <el-form-item label="备注" style="position: relative;top: -140px;left: 30px">
                        <el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入" style="width: 820px"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <!--库存信息-->
            <div style="width: 65%;height: 160px;background: white;margin-left: 250px;margin-top: 20px;border-radius: 4px">
                <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 40px">
                    <div style="position:relative; left: -90px">
                        库存信息
                    </div>
                    <el-form ref="form" :model="form" label-width="120px">
                        <el-form-item label="库存上限" style="position: relative;left: -90px;top: 10px">
                            <el-input-number v-model="form.upperInventory" :min="0" :max="9999" :step="1" size="large" style="width: 300px" placeholder="请输入"></el-input-number>
                        </el-form-item>
                        <el-form-item label="库存下限" style="position: relative;left: 540px;top: -50px">
                            <el-input-number v-model="form.lowerInventory" :min="0" :max="9999" :step="1" size="large" style="width: 300px" placeholder="请输入"></el-input-number>
                        </el-form-item>
                        <el-form-item label="更换周期" style="position: relative;top: -50px;left: 10px">
                            <el-input-number v-model="form.cycle" :min="0" :max="9999" :step="1" size="large" placeholder="请输入"></el-input-number>
                            <el-select v-model="form.cycleUnit" placeholder="请选择" size="large" style="width: 120px">
                                <el-option label="天" value="天"></el-option>
                                <el-option label="周" value="周"></el-option>
                                <el-option label="月" value="月"></el-option>
                                <el-option label="季" value="季"></el-option>
                                <el-option label="年" value="年"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>

            <!--关联设备-->
            <div style="width: 65%;height: auto;background: white;margin-left: 250px;margin-top: 20px;border-radius: 4px">
                <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 40px">
                    <div style="position: relative;left: -110px">
                        关联设备
                    </div>
                    <div style="background: white;overflow: hidden">
                        <el-button type="primary" @click="addRow" style="margin-left: 10px;margin-top: 10px">添加</el-button>
                        <el-button type="danger" @click="removeRows">移除</el-button>
                        <el-table :data="form.association" style="width: 100%" @selection-change="associationSelection">
                            <el-table-column type="selection"></el-table-column>
                            <el-table-column label="序号" width="80" prop="archivesId">
                            </el-table-column>
                            <el-table-column prop="equipmentNumber" label="设备编号" align="center"></el-table-column>
                            <el-table-column prop="devicename" label="设备名称" align="center"></el-table-column>
                            <el-table-column prop="specificationsModels" label="规格型号" align="center"></el-table-column>
                            <el-table-column prop="deviceTypeName" label="设备类型" align="center"></el-table-column>
                            <el-table-column prop="placeForStorageName" label="存放位置" align="center"></el-table-column>
                            <el-table-column prop="currentStatus" label="设备状态" align="center">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.currentStatus === 0">正常运行</span>
                                    <span v-if="scope.row.currentStatus === 1">报废</span>
                                    <span v-if="scope.row.currentStatus === 2">停用</span>
                                    <span v-if="scope.row.currentStatus === 3">停机待修</span>
                                    <span v-if="scope.row.currentStatus === 4">带病运行</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="设备部位" align="center">
                                <template slot-scope="{row}">
                                    <el-input v-model="row.deviceBody"></el-input>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div>
                </div>
            </div>

            <!--备件图片-->
            <div style="width: 65%;height: 200px;background: white;margin-left: 250px;margin-top: 220px;border-radius: 4px;">
                <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 40px">
                    &nbsp;&nbsp;&nbsp;备件图片
                </div>
                <el-upload
                        class="upload-demo"
                        action="http://localhost:8090/spare/api/upload"
                        :multiple="true"
                        :on-success="handleSuccess"
                        :before-upload="beforeUpload"
                        :headers="headers"
                        :data="data"
                        :limit="limit"
                        :on-exceed="handleExceed"
                        :on-remove="handleRemove"
                        :auto-upload="false"
                        :show-file-list="false"
                        :on-change="handleChanges"
                ><el-button size="small" type="primary" style="margin-left: 20px;margin-top: 10px;position: relative;left: -3px">点击上传</el-button>
                    <ul style="list-style: none">
                        <li style="float: left" v-for="(url, index) in form.imgList" :key="index">
                            <img :src="url.url" style="width: 100px;height: 100px;margin-left: 20px">
                        </li>
                    </ul>

                </el-upload>
            </div>

            <!--关联文档-->
            <div style="width: 65%;height: 200px;background: white;margin-left: 250px;margin-top: 20px;border-radius: 4px"  >
                <div style="width: 100%;height: 40px;border-bottom: 2px solid #F5F7F9;font-size: 14px;line-height: 40px">
                    &nbsp;&nbsp;&nbsp;关联文档
                </div>
                <div>
                    <el-upload
                            class="upload-demo"
                            action="http://localhost:8090/spare/api/uploadFile"
                            :multiple="true"
                            :on-success="handleSuccesss"
                    >
                        <el-button size="small" type="primary" style="position: relative;left: 18px;top: 10px">点击上传</el-button>
                    </el-upload>
                    <el-table :data="form.fileList" style="width: 100%;margin-top: 10px ">
                        <el-table-column prop="name" label="文件名" align="center"></el-table-column>
                        <el-table-column prop="url" label="文件URL" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>

            <!--弹出设备列表-->
            <el-dialog :visible.sync="dialogVisible" title="设备信息">
                <el-form :model="EquipmentArchives" label-width="80px">
                    <el-form-item label="设备编号">
                        <el-input v-model="form.equipmentNumber" style="width: 200px"></el-input>
                    </el-form-item>
                    <el-form-item label="设备类型">
                        <el-cascader
                                v-model="form.archivesId"
                                :options="deviceTypes"
                                :props="propes"
                                @change="handleChange"
                                clearable
                                expand-trigger="hover"
                                placeholder="请选择"
                        ></el-cascader>
                    </el-form-item>
                    <div style="position:relative; left: 300px;top: -95px">
                        <el-form-item label="存放位置">
                            <el-select v-model="form.placeForStorage">
                                <el-option v-for="(item,index) in PlaceForStorage" :key="index" :label="item.locationName" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="设备状态">
                            <el-select v-model="form.currentStatus">
                                <el-option label="报废" value="0"></el-option>
                                <el-option label="停役" value="1"></el-option>
                                <el-option label="故障" value="2"></el-option>
                                <el-option label="正常运行" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div style="position: relative;left: 550px;top:-140px">
                        <el-form-item>
                            <el-button type="primary" @click="submitForm">提交</el-button>
                        </el-form-item>
                    </div>
                </el-form>
                <div style="position:relative;top: -140px">
                    <el-table :data="EquiTableData" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" align="center"></el-table-column>
                        <el-table-column prop="archivesId" label="序号"></el-table-column>
                        <el-table-column prop="equipmentNumber" label="设备编号" align="center"></el-table-column>
                        <el-table-column prop="devicename" label="设备名称" align="center"></el-table-column>
                        <el-table-column prop="deviceTypeName" label="设备类型" align="center"></el-table-column>
                        <el-table-column prop="placeForStorageName" label="存放位置" align="center"></el-table-column>
                        <el-table-column prop="currentStatus" label="设备状态" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.currentStatus === 0">正常运行</span>
                                <span v-if="scope.row.currentStatus === 1">报废</span>
                                <span v-if="scope.row.currentStatus === 2">停用</span>
                                <span v-if="scope.row.currentStatus === 3">停机待修</span>
                                <span v-if="scope.row.currentStatus === 4">带病运行</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页-->
                    <el-pagination
                            :current-page.sync="EquipmentArchives.page"
                            :page-size="EquipmentArchives.pagesize"
                            :page-sizes="[10, 20, 30, 40]"
                            :total="equTotal"
                            background
                            layout="total, sizes ,prev, pager, next, jumper"
                            style="padding: 30px 0; text-align: center"
                            @current-change="selAllequArch"
                            @size-change="handleSizeChanges"
                    />
                    <el-button type="primary" @click="dialogVisible = false" style="position: relative;top: 100px;float: right">确认</el-button>
                    <el-button @click="no" style="position: relative;top: 100px;left:-30px;float: right">取消</el-button>
                </div>
            </el-dialog>

            <!--最下面-->
            <div style="width: 100%;height: 50px;background: white;box-shadow: 0px -4px 4px rgb(226,228,229);position:fixed;top: 920px;z-index: 999">
                <div style="margin-left: 700px;margin-top: 15px">
                    <el-button @click="closes">关闭</el-button>
                    <el-button type="success" @click="okGos()">确认</el-button>
                </div>
            </div>
        </div></el-col>
    </el-row>
</template>

<script>
    //todo 此页面需要获取登陆后的人员数据
    export default {
        name: "",
        data() {
            return {
                dialogVisible:false,
                //添加表单数据
                form: {
                    spId:'',
                    spCode: '',
                    spName: '',
                    spSpecification: '',
                    spTypeId: '',
                    saUnit: '',
                    factureName: '',
                    remark:'',
                    upperInventory: null,
                    lowerInventory: null,
                    cycle: null,
                    cycleUnit: '',
                    replaceCycle:'',
                    association:[],
                    imgList: [],
                    fileList: []
                },
                //备件类型树形数据
                options:[],
                props: {
                    value: 'spId',
                    label: 'spTypename',
                    children: 'children'
                },
                //设备查询模糊查分页数据
                EquipmentArchives:{
                    equipmentNumber:'',
                    archivesId:null,
                    placeForStorage:null,
                    currentStatus:null,
                    page:1,
                    pageSize:10
                },
                equTotal:0,
                EquiTableData:[],
                //树形设备类型
                deviceTypes:[],
                propes: {
                    value: 'id',
                    label: 'typeName',
                    children: 'children'
                },
                //设备存放位置
                PlaceForStorage:[],
                vals:[],
                limit: 10,
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                data: {
                    type: 'image'
                },
                id:null
            }
        },
        methods :{
            closes(){
                this.$router.push('/ledger')
            },
            //判断备件台账中是否已经存在当前备件
            nameSelf(val){
                this.request.get("/spare/spare-ledger/nameSelf/"+val
                ).then(res=>{
                    if (res.data == 1){
                        this.$message({
                            showClose: true,
                            message: '已经存在当前备件，请重新输入！',
                            type: 'error'
                        });
                    }
                })
            },
            okGos(){
                if (this.id==null){
                    this.okGo()
                }else {
                    this.updateSpareLedger()
                }
            },
            //添加备件信息
            okGo(){
                this.request.post("/spare/spare-ledger/addSpareLedger",this.form)
                .then(res=>{
                    this.$message({
                        showClose: true,
                        message: '添加成功',
                        type: 'success'
                    });
                    this.$router.push('/ledger')
                })
            },
            handleSuccesss(response, file) {
                console.log(response)
                this.form.fileList.push({
                    name: file.name,
                    url: response[0]
                })
            },
            handleDelete(row) {
                this.$confirm(`确定删除文件 ${row.name} 吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        this.form.fileList.splice(this.form.fileList.indexOf(row), 1)
                        this.$message.success('删除成功')
                })
            },
            beforeUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
                const isLt500K = file.size / 1024 < 500

                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG/PNG 格式!')
                }
                if (!isLt500K) {
                    this.$message.error('上传图片大小不能超过 500KB!')
                }
                return isJPG && isLt500K
            },
            handleSuccess(response, file) {
                const url = response.data
                this.form.
                bpush({
                    name: file.name,
                    url: url
                })
            },
            handleExceed(files) {
                this.$message.warning(`当前限制选择 ${this.limit} 张图片，本次选择了 ${files.length} 张图片，已经选择了 ${this.form.imgList.length} 张图片`)
            },
            handleRemove(file) {
                const index = this.form.imgList.indexOf(file)
                this.form.imgList.splice(index, 1)
            },
            associationSelection(vals){
                this.vals = vals
            },
            //移除
            removeRows(){
                for (let i = 0; i < this.vals.length; i++) {
                    for (let j = 0; j < this.form.association.length; j++) {
                        if (this.vals[i].equipmentNumber == this.form.association[j].equipmentNumber){
                            this.form.association.splice(j, 1);
                            j = 0;
                        }
                    }
                }
            },
            //提交
            submitForm(){
                this.selAllequArch()
            },
            //查询设备列表
            addRow(){
                this.dialogVisible = true
                this.selAllequArch()
                this.selPlace()
                this.selAllDeviceType()
            },
            //查询所有设备存放位置
            selPlace(){
              this.request.get("/device/place-for-storage/selPlace")
              .then(res=>{
                  this.PlaceForStorage = res.data
              })
            },
            //树形查询设备类型
            selAllDeviceType(){
                this.request.get("/device/device-type/selAllDeviceType")
                .then(res=>{
                    this.deviceTypes = res.data
                })
            },
            //查询设备列表
            selAllequArch(){
              this.request.post("/device/equipment-archives/selAllequArch",this.EquipmentArchives)
              .then(res=>{
                 this.EquiTableData = res.data.items
                 this.equTotal = res.data.counts
              })
            },
            //备件类型树形查询
            selAllSpareType(){
                this.request.get("/spare/spare-types/selAllSpareType")
                    .then(res=>{
                        this.options = res.data
                    })
            },
            //分页跳转数据
            handleSizeChanges(pageSize) {
                this.EquipmentArchives.pagesize = pageSize;
                this.selAllequArch();
            },
            handleChange(value) {
                console.log(value)
            },
            handleSelectionChange(rows){
                this.form.association = []
                for (let i = 0; i < rows.length; i++) {
                    this.form.association.push(rows[i]);
                }
            },
            no(){

            },
            handleChanges(file) {
                if (file.status === 'ready') {
                    const reader = new FileReader()
                    reader.readAsDataURL(file.raw)
                    reader.onload = () => {
                        const data = {
                            base64: reader.result
                        }
                        this.request.post('/spare/api/upload', data).then(response => {
                            const url = response.data
                            this.form.imgList.push({
                                name: file.name,
                                url: url
                            })
                        })
                    }
                }
            },
            selOneToSpare(){
                this.request.get("/spare/spare-ledger/selOneToSpare/"+this.id)
                .then(res=>{
                    console.log(res)
                    this.form = res.data
                })
            },
            updateSpareLedger(){
                this.form.spId = this.id
                this.request.post("/spare/spare-ledger/updateSpareLedger",this.form)
                .then(res=>{
                    this.$message({
                        message: '修改成功！',
                        type: 'success'
                    });
                    this.$router.push('/ledger')
                })
            }
        },
        created() {
            this.selAllSpareType()
            this.id = this.$route.query.id
            if (this.id!=null){
                this.selOneToSpare()
            }
        },
    }
</script>

<style scoped>

</style>
